<template>
	<view class="page-con set-hire-date">
		<view class="my-page-content ">
			<view class="my-m-title">设置出租排期</view>
			<view class="mb20 grey-tips">
				<view>1.默认所有日期均可出租，请设置哪些日期不可租 </view>
				<view>2.单击选择两个日期，即可关闭或开放该时间出租状态</view>
				<view>3.双击可修改当天出租状态</view>
			</view>

			<van-calendar title="日历" type="multiple" :max-date="maxDate" :show-title="false" :default-date="[]"
				:poppable="false" :show-confirm="false" :row-height="50" @select="selectDate" @unselect="unselectDate"
				@dbClick="dbClick" class="calendar" ref="calendar" />

			<uni-load-more :status="status" />

			<footBtn v-if="pageData.type  == 2" btn-text="确 定" @nextStep="nextStep"></footBtn>





		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	import footBtn from '@/components/myBtn/footBtn.vue';


	export default {
		components: {
			footBtn,
		},
		props: {
			dataItem: Object
		},
		watch: {
			'dataItem': {
				handler(n) {
					if (this.pageData.type == 1) {
						this.handleDate();
					}
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				maxDate: new Date().getTime() + 90 * 24 * 60 * 60 * 1000,
				formData: '',
				date: [],
				selectList: [],
				unselectList: [],
				pageData: {
					type: 1 //1 新增修改  2房源详情页编辑修改
				},
				status: 'more'

			}
		},
		onLoad(option) {
			if (option && option.type) {
				this.pageData = option;
			}
		},
		mounted() {
			if (this.pageData.type == 2) {
				this.handleDate();
			}
		},
		onReachBottom() {
			if (this.maxDate < new Date().getTime() + 730 * 24 * 60 * 60 * 1000) {
				this.status = 'loading';
				this.maxDate += 30.5 * 24 * 60 * 60 * 1000;
				this.$nextTick(() => {
					this.status = 'more';
				})
			} else {
				this.status = 'noMore';
			}
		},
		methods: {
			handleDate() {
				if (this.pageData.type == 1) {
					this.formData = this.dataItem;
				} else {
					this.formData = this.$getStorage("roomInfo");
				}
				this.date = this.formData.disabled_date_range || [];
				this.$nextTick(() => {
					this.$refs.calendar.setData({
						currentDate: this.date,
					});
				})
			},
			dbClick() {
				this.unselectList = [];
				this.selectList = [];
			},
			handClickData(date) {
				this.setDateRange();

				if (this.selectList.length == 1) {
					this.selectList.push(date);
					this.selectList.sort();

					let temp = moment(this.selectList[0]).add(1, 'days').format('YYYY-MM-DD');
					while (temp < this.selectList[1]) {
						let index = this.date.findIndex(item => item == temp);
						if (index > -1) {
							this.date.splice(index, 1);
						} else {
							this.date.push(temp);
						}
						temp = moment(temp).add(1, 'days').format('YYYY-MM-DD');
					}
					this.date.sort();
					this.$refs.calendar.setData({
						currentDate: this.date,
					});
				} else {
					this.selectList = [date];
				}


			},
			selectDate(data) {
				const time = data.detail[data.detail.length - 1].getTime();
				let date = moment(time).format('YYYY-MM-DD'); // 'YYYY-MM-DD HH:mm:ss'
				this.date.push(date);
				this.handClickData(date);


			},
			unselectDate(data) {
				const time = data.detail.getTime();
				let date = moment(time).format('YYYY-MM-DD'); // 'YYYY-MM-DD HH:mm:ss'
				this.date = this.date.filter(item => {
					return item != date;
				})
				this.handClickData(date);

			},
			daysBetween(date1, date2) {
				const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
				return Math.round(Math.abs((date1 - date2) / oneDay));
			},
			setDateRange() {
				const currentDate = new Date();
				currentDate.setHours(0, 0, 0, 0); // 设置时间为午夜00:00:00

				// // 获取当前日期的毫秒时间戳
				const dateTimestamp = currentDate.getTime();
				this.formData.date_range = [this.$timestampToTime(dateTimestamp), this.$timestampToTime(dateTimestamp +
					730 * 24 * 60 * 60 * 1000)];
				// console.log(dateTimestamp);

			},
			setRentDate() {
				if (this.pageData.type == 1) {
					return;
				}
				let data = {
					date_range: this.formData.date_range,
					disabled_date_range: this.formData.disabled_date_range,
				}
				this.$http.setRentDate(this.formData.id, data).then(res => {
					this.$toast('操作成功');
					this.$goPage(2, '/subHouseDetail/homeDetail');
					// uni.$emit('refreshRoomData');
				})
			},
			nextStep() {
				this.formData.disabled_date_range = this.date || [];
				this.setDateRange();
				this.setRentDate();
				return this.formData;
			}



		}
	}
</script>

<style lang="scss">
	.page-con {
		/* height: 100vh;
		overflow: hidden; */
		position: relative;
	}

	.calendar {
		// --calendar-height: 618px;

		// position: relative;
		// top:0;
		// left:0;
		/* padding-bottom: 200rpx; */
		.van-calendar__header {
			// border: 1px solid red;
			// position: sticky;
			// top:0;
			// left:0;
		}
	}
</style>
<style lang="scss">
	.set-hire-date {

		.van-calendar__day--start,
		.van-calendar__day--end,
		.van-calendar__day--multiple-middle,
		.van-calendar__day--multiple-selected {
			background-color: transparent !important;
			// text-decoration: line-through;
			color: #B8B8B8 !important;
			position: relative;

			&::after {
				content: '';
				width: 70%;
				height: 2px;
				background-color: #B8B8B8;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
</style>